<script>
import store from "@/store";
import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
import {request} from "../../static/core/request";
import {getUserInfoApi, loginApi} from "../../api/common/user";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image.vue";
export default {
  name: "index",
  components: {UImage, UButton},
  data() {
    return {
      username: "admin",
      password: "123456",
      agreement: [],
      loading: false,
      status: 0, // 0 获取token中 1 获取到token
      hasPhone: false,
      token: null,
      userInfo: null,
    };
  },
  computed: {

  },
  methods: {
    async loginClick(){
      if (!this.agreement.includes('agreement')) {
        this.showTip();
      } else {
        this.login();
        // await store.dispatch("user/saveLogin", {
        //   token: this.token,
        //   userInfo: this.userInfo,
        // });
        // uni.reLaunch({
        //   url: "/pages/index/index"
        // });
      }
    },
    async checkPhone(){
      const { data } = await getUserInfoApi();
      if(data.phoneNumber) {
        this.hasPhone = true;
      }
    },
    showTip(){
      uni.showToast({
        title: '请阅读并同意《⽤户服务协议和隐私政策》',
        icon: 'none',
        duration: 2000
      })
    },
    // 代码待优化
    async login() {
      store.dispatch("user/login", {
        username: this.username,
        password: this.password,
        type: 2,
      }).then(() => {
        uni.reLaunch({
          url: "/pages/search/index"
        });
      });
      // const res = await loginApi({
      //   username: this.username,
      //   password: this.password,
      //   type: 2,
      // });
      // console.log(res)
      // const self = this;
      // uni.login({
      //   provider: 'weixin', //使用微信登录
      //   success: async function (loginRes) {
      //     this.loading = false;
      //     const code = loginRes.code;
      //     if (!code) {
      //       uni.showToast({
      //         title: "登录失败",
      //         icon: "none"
      //       });
      //       return;
      //     }
      //     request({
      //       url: "/mini/api/wxuser/login",
      //       method: "POST",
      //       data: {
      //         code,
      //       }
      //     }).then( async res => {
      //       self.token = res.data.userToken;
      //       self.userInfo = res.data;
      //       if (res.data.wxPhone) {
      //         self.hasPhone = true;
      //       }
      //     })
      //     this.status = 1;
      //   }
      // });
    },
    toResetPassWord() {
      uni.navigateTo({
        url: "/pages/reset-password/index"
      });
    },
    toAgreement() {
      uni.navigateTo({
        url: "/pages/login/agreement/index"
      });
    },
    groupChange(){
      // this.agreement = !this.agreement;
      console.log(this.agreement)
    },
    handlePhoneNumber(e){
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        request({
          url: "/mini/api/wxuser/authUserPhone",
          method: "POST",
          header: {
            userToken: this.token,
            openid: this.userInfo.openid,
          },
          data: {
            code: e.detail.code,
          }
        }).then( async data => {
          await store.dispatch("user/saveLogin", {
            token: this.token,
            userInfo: this.userInfo,
          });
          uni.reLaunch({
            url: "/pages/index/index"
          });
        })
      }
    }
  },
  created() {
    // const token = uni.getStorageSync("token");
    // if (token) {
    //   uni.reLaunch({
    //     url: "/pages/index/index"
    //   });
    // } else {
    //   this.login();
    // }
  }
}
</script>

<template>
  <view class="page">
    <view class="header">
      <image class="bg" src="/static/images/img-4.png" mode="widthFix"></image>
      <image class="left" src="/static/images/img-6.png" mode="widthFix"></image>
      <image class="right" src="/static/images/img-7.png" mode="widthFix"></image>
      <image class="right-ball" src="/static/images/img-1.png" mode="widthFix"></image>
      <image class="center" src="/static/images/img-8.png" mode="widthFix"></image>
    </view>

    <view class="footer">
      <image class="left" src="/static/images/img-3.png" mode="widthFix"></image>
      <image class="right" src="/static/images/img-5.png" mode="widthFix"></image>
      <image class="center" src="/static/images/img-1.png" mode="widthFix"></image>
    </view>

    <view class="form">
      <view class="title">登录账号</view>
      <view class="input-wrap">
        <input
            class="input"
            type="text"
            placeholder="请输入账号"
            v-model="username"
        />
      </view>
      <view class="input-wrap">
        <input
            class="input"
            type="password"
            placeholder="请输入密码"
            v-model="password"
        />
      </view>
      <view class="btns">
        <u-button class="btn" size="large" @click="loginClick" shape="circle" type="primary" style="margin-top: 30rpx;">登录</u-button>
      </view>
    </view>

    <view class="form">
<!--      <view class="logo-wrap">-->
<!--        <image src="/static/images/login_logo.png" mode="widthFix" style="width: 250px;height: 75px;" class="logo"></image>-->
<!--      </view>-->
      <view class="btns">

      </view>
    </view>

    <view class="ag-wrap">
      <view class="agreement cell">
        <view class="cell-hd">
          <u-checkbox-group
              v-model="agreement"
              placement="column"
              @change="groupChange"
          >
            <u-checkbox
                label=" "
                name="agreement"
                @click="toAgreement"
                activeColor="#3c9cff"
                inactiveColor="#3c9cff"
                size="14"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="cell-bd">
          <text>请阅读并同意<text class="link" @click="toAgreement">《⽤户服务协议和隐私政策》</text></text>
        </view>
        <!--        <u-radio-group-->
        <!--            v-model="agreement"-->
        <!--            placement="column"-->
        <!--            @change="groupChange"-->
        <!--        >-->
        <!--          <u-radio-->
        <!--              label="1"-->
        <!--              name="11"-->
        <!--              @click="toAgreement"-->
        <!--          >-->
        <!--            <text @click="toAgreement">请阅读并同意《⽤户服务协议和隐私政策》</text>-->
        <!--          </u-radio>-->
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page{
  background: #fff;
  height: 100vh;
}
.header{
  .bg{
    position: relative;
    width: 760rpx;
    height: 356rpx;
    left: -10rpx;
  }
  .left{
    position: fixed;
    left: 0;
    top: 0;
    width: 183rpx;
    height: 278rpx;
  }
  .right{
    position: fixed;
    right: 0;
    top: -10rpx;
    width: 433rpx;
    height: 262rpx;
  }
  .right-ball{
    position: fixed;
    right: -44rpx;
    top: 272rpx;
    width: 137rpx;
    height: 137rpx;
  }
  .center{
    position: fixed;
    top: 188rpx;
    width: 224rpx;
    height: 224rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.footer{
  .left{
    position: fixed;
    left: -50rpx;
    bottom: 0;
    width: 320rpx;
    height: 206rpx;
  }
  .right{
    position: fixed;
    right: 0;
    bottom: 0rpx;
    width: 629rpx;
    height: 284rpx;
  }
  .center{
    position: fixed;
    bottom: 39rpx;
    width: 137rpx;
    height: 137rpx;
    left: 180rpx;
  }
}
.form{
  margin-top: 50rpx;
  padding: 0 45rpx;
  .title{
    font-size: 48rpx;
    //font-weight: bold;
    letter-spacing: 4rpx;
    margin-bottom: 50rpx;
  }
  .input-wrap{
    padding: 28rpx 0;
    border-bottom: 1px solid #E5E5E5;
    .input{
      box-sizing: content-box;
      height: 28rpx;
      padding: 12rpx 0;
    }

  }
}
.btns{
  margin-top: 163rpx;
  .btn{
    width: 100%;
  }
}
//.form{
//  background-size: 100% 100%;
//  box-sizing: border-box;
//  padding: 0 75rpx;
//  position: relative;
//  //top: 50%;
//  transform: translateY(50%);
//  .logo-wrap{
//    width: 579rpx;
//    margin: 0 auto;
//    text-align: center;
//    .logo{
//      width: 100%;
//    }
//  }
//
//  .btns{
//    margin-top: 163rpx;
//  }
//}

.ag-wrap{
  position: fixed;
  bottom: 258rpx;
  margin: auto;
  width: 100%;
  text-align: center;
  padding-left: 115rpx;
}
.agreement{
  text-align: left;
  font-size: 28rpx;
  margin: auto;
  color: #999999;
  .link{
    color: #3C9CFF;
  }
}
</style>
